<template>
  <div class="about">
    <div v-for="item of cart" :key="item.id">
      
      <van-card
        tag="标签"
        :price="item.productPrice"
        :desc="item.productInfo"
        :title="item.productName"
        :thumb="item.productCover"
      >
        <template #num>
          <van-stepper v-model="item.productCount" />
        </template>
        <template #footer>
          <van-checkbox v-model="item.isSelected" @click="handleItem" class="checkbox"></van-checkbox>
          <div>小计:￥{{item.productPrice*item.productCount | handleNum}}</div>
        </template>
      </van-card>
    </div>
    <van-submit-bar :price="cart | sum" button-text="提交订单">
      <van-checkbox v-model="checkAll" @click="onSum">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
<script>
import {getCart} from '../model/getCart'
export default {
  data(){
    return {
      cart:[],
      checkAll:false
    }
  },
  mounted(){
    let url = `/cart`
    getCart(url).then((res)=>{
      this.cart = res.data
    })
    this.handleItem()
    this.checkAll = true
  },
  filters:{
    sum(arr){
      if(arr.length>0){
        var res = arr.filter(function(item){
          return item.isSelected == true
        })
        var sum = 0;
        res.forEach(function(item){
          sum = sum + (item.productPrice*item.productCount)
        })
        return sum *100
      }
    },
    // allState(arr){
    //   // console.log(arr)
    //   var res = arr.every(function(item){
    //     return item.isSelected == true
    //   })
    //   return res
    // },
    handleNum(att){
      var arr = att.toFixed(2)
      return arr
    },
  },
  methods:{
    onSum(){
      var cart = this.$data.cart;
      cart.forEach(item=>{
        item.isSelected = this.checkAll
      })
      this.cart = cart
    },
    handleItem(){
        this.checkAll = this.cart.every(item=>item.isSelected)
    },
  }

}
</script>
<style scoped>
.about{
  position: relative;
}
.checkbox{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
</style>
